<template>
  <view class="filLists" v-for="(item, index) in fillListAll" :key="index" @click="tabChange(item.id)">
    <image :src="item.image" class="filLists_img"></image>
    <view class="filLists1">
      <view class="filLists2">
        <image src="../../static/filling/icon1.png"></image>
        <text>{{ item.name }}</text>
      </view>
      <view>
        <text>{{ item.distance }}</text>
       <!-- <u-icon name="phone" color="#2979ff" size="28" style="margin: 0px 10rpx 0px 20rpx"></u-icon>
        <text>{{ item.mobile }}</text> -->
      </view>
      <view>{{ item.address }}</view>
    </view>
  </view>
  <view style="color: #999; width: 100%; text-align: center;margin-top: 30rpx;" v-if="fillListAll.length != 1">暂无更多加注机</view>
  <view style="color: #999; width: 100%; text-align: center;margin-top: 30rpx;" v-if="fillListAll.length == 1 && slide">
    暂无更多加注机
  </view>
</template>

<script setup lang="ts">
import { PropType } from 'vue';
defineProps({
  fillListAll: {
    type: Array as PropType<Array<any>>,
  },
  slide: {
    type: Boolean,
  },
});
const emits = defineEmits(['tabChange']);
function tabChange(id: number) {
  emits('tabChange', id);
}
</script>

<style scoped lang="less">
@import url('../mapFilling/less/fillingList.less');
</style>
